<template>
    <div class="container trading">
        <div class="trading_head l-f l-row-sb">
            <p class="trading_head_title">{{$t('header.XAUUSDAlTrading')}}</p>
            <a-button class="trading_head_btn">{{$t('aiTrading.tradeHistory')}}</a-button>
        </div>
        <InfoBox />
        <div class="h5-box">
            <QuestionBox @onEvent="onQuestion" :title="$t('home.advantagesOfXAUUSDAITrading')" :desc="$t('home.XAUUSDIntelligentTradingEngine')" />
         </div>
        <div class="product">
            <div class="product_head l-f l-row-sb">
                <p class="product_head_title">{{$t('aiTrading.arbitrageProducts')}}</p>
                <a-button @click="onAll" class="product_head_btn" type="text">{{$t('aiTrading.seeAll')}}</a-button>
            </div>
             <ProductList />
        </div>
        <!-- advantage -->
         <div class="advantage pc-box">
            <p class="advantage_title">{{$t('aiTrading.advantages')}}</p>
            <div class="advantage_list">
                <div class="advantage_list_item" v-for="(item,index) in advantageList" :key="index">
                    <div class="advantage_list_item_title l-f">
                        <img class="advantage_list_item_title_icon" src="@/assets/icons/icon-advantage.svg" />
                        <p class="advantage_list_item_title_label">{{item.title}}</p>
                    </div>
                    <p class="advantage_list_item_desc">{{item.desc}}</p>
                </div>
            </div>
         </div>
    </div>
</template>

<script setup>
import { computed } from 'vue'
import { useI18n } from 'vue-i18n'
import { useRouter } from 'vue-router'


import InfoBox from '@/views/account/components/infoBox/index.vue'
import ProductList from './components/productList/index.vue'
import QuestionBox from '@/components/questionBox/index.vue'
const { t } = useI18n()
const router = useRouter()

const advantageList = computed(() => {
    return [
        {
            title: t('aiTrading.speedAndEfficiency'),
            desc: t('aiTrading.speedAndEfficiencyDesc'),
        },
        {
            title: t('aiTrading.dayTrading'),
            desc: t('aiTrading.dayTradingDesc'),
        },
        {
            title: t('aiTrading.emotionalFactors'),
            desc: t('aiTrading.emotionalFactorsDesc'),
        },
        {
            title: t('aiTrading.reducedTradingCosts'),
            desc: t('aiTrading.reducedTradingCostsDesc'),
        },
        {
            title: t('aiTrading.multiStrategyAndMultiMarket'),
            desc: t('aiTrading.multiStrategyAndMultiMarketDesc'),
        }
        ,
        {
            title: t('aiTrading.dataDrivenDecisionMaking'),
            desc: t('aiTrading.dataDrivenDecisionMakingDesc'),
        }
    ]
})

const onQuestion = () => {
    router.push('/aiTradingAdvantages')
}

const onAll = () => {
    router.push({name: 'aiTradingConfirmation', params: {
        index: 0
    }})
}

</script>

<style lang="scss" scoped>
@import url("./index.scss");
</style>